<template>
  <div class="expertRegister positRel">
    <div class="content">
      <div class="title_t">
        <img src="" alt="" />
        <div class="text">
          找专家/
          <div style="display: inline; color: #52555a">专家主页</div>
        </div>
      </div>

      <div class="user_box">
        <img :src="expertP.face" alt="" />
        <div class="user_r">
          <div class="name">{{ expertP.realName }}</div>
          <div class="introduce">简介： {{ expertP.introduction }}</div>
          <div class="introduce">擅长： {{ expertP.domain }}</div>
          <div class="score">
            <Icon type="md-star" />
            <div class="text" v-if="expertP.expertStatistics">
              {{ expertP.expertStatistics.scoreAvg }}分
            </div>
          </div>
        </div>

        <div class="followShare">
          <!-- <Icon type="ios-thumbs-up" size="18" />
          <Icon type="md-share" size="18" /> -->
          <div style="padding: 0 5px">
            <span style="color: #fdcd10; font-size: 14px"
              ><Icon
                style="color: #fdcd10"
                type="ios-thumbs-up-outline"
                size="18"
                @click="addBaseD()"
              />{{ likedSum }}</span
            >
          </div>
          <div
            class="follow"
            :class="expertP.focus ? 'course-follow' : 'course-follownot'"
            @click="follow"
          >
            + {{ expertP.focus ? "已关注" : "关注" }}
          </div>
        </div>
      </div>

      <div class="tab_box">
        <Tabs :value="tabsRoute" @on-click="tabChange">
          <TabPane label="咨询/挂号" name="name1">
            <expert-advice v-if="tabsRoute === 'name1'" :expertP="expertP" />
          </TabPane>
          <TabPane label="课程" name="name2">
            <subject-page v-if="tabsRoute === 'name2'" :expertId="expertId" />
          </TabPane>
          <TabPane label="直播" name="name3">
            <live-list v-if="tabsRoute === 'name3'" :seachObj="seachObj" :column="3" />
          </TabPane>
          <TabPane label="知识" name="name4">
            <knowledge-page v-if="tabsRoute === 'name4'" />
          </TabPane>
          <TabPane label="动态" name="name5">
            <dynamic-page v-if="tabsRoute === 'name5'" />
          </TabPane>
        </Tabs>
      </div>
    </div>
    <my_footer></my_footer>
  </div>
</template>

<script>
import liveList from "@/components/live/liveList.vue"; //直播列表
import expertAdvice from "./expertAdvice/expertAdvice.vue"; //咨询/挂号
import knowledgePage from "./knowledge/knowledgePage.vue";
import subjectPage from "./subject/subjectPage.vue";
import dynamicPage from "./dynamicPage/dynamicPage.vue";
import my_footer from "@/components/footer/my_footer.vue";
import { getExpertList } from "../../api/otwoo";
import * as experts from "@/api/experts.js";
import { saveIdol } from "@/api/course.js";
export default {
  components: {
    expertAdvice,
    knowledgePage,
    my_footer,
    subjectPage,
    liveList,
    dynamicPage,
  },
  data() {
    return {
      valueText: 3,
      valueCustomText: 3.8,
      expertId: "",
      expertP: {},
      seachObj: {
        userId: "",
        lxArr: [],
        keywords: "",
      },
      tabsRoute: "name1",
      likedSum: null,
    };
  },
  mounted() {
    this.expertId = this.$route.query.id;
    setTimeout(() => {
      this.getExpertList(this.$route.query.id);
    }, 1000);
  },
  methods: {
    addBaseD() {
      this.likedSum = this.likedSum + 1;
      experts.setExpertDz(this.expertId).then((res) => {
        if (res.code == 200) {
          this.$Message.success("点赞成功");
        } else {
          this.$Message.error(res.message || "点赞失败");
        }
      });
    },
    getExpertList(id) {
      experts.getExpertId(id).then(({ code, result }) => {
        if (code === 200) {
          this.expertP = result;
          this.likedSum = Number(result.expertStatistics.likedSum);
        }
      });
    },
    // 关注
    follow() {
      // this.info.follow = !this.info.follow;
      saveIdol({
        idolId: this.$route.query.id,
        type: "0",
      }).then(({ code, result }) => {
        if (code === 200 && result) {
          this.$Message.success("操作成功");
          this.getExpertList(this.$route.query.id);
        }
      });
    },
    //切换tab页
    tabChange(val) {
      if (val == "name3") this.seachObj.userId = this.expertId;
      this.tabsRoute = val;
    },
  },
};
</script>

<style lang="scss" scoped>
.expertRegister {
  width: 100%;
  min-height: calc(100vh - (80 / 1920 * 100vw));
  display: inline-block;
  background: #f1f1f1;

  .content {
    width: 70%;
    margin: 40px auto;

    .title_t {
      display: flex;
      align-items: center;

      img {
        width: 11px;
        height: 14px;
      }

      .text {
        color: #333;
      }
    }

    .user_box {
      width: 100%;
      height: 146px;
      background: #fff;
      margin: 20px 0px;
      padding: 20px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      position: relative;

      img {
        width: 86px;
        height: 86px;
        border-radius: 5px;
      }

      .user_r {
        width: 70%;
        margin-left: 20px;

        .name {
          font-size: 18px;
          font-weight: 400;
          color: #333333;
        }

        .introduce {
          width: 100%;
          margin: 6px 0px;
          color: #9a9a9a;
          font-size: 14px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .score {
          display: flex;
          align-items: center;
          color: #fcae17;
          font-size: 18px;
          font-weight: bold;

          img {
            width: 12px;
            height: 13px;
            margin-right: 5px;
          }
        }
      }

      .followShare {
        display: flex;
        align-items: center;
        position: absolute;
        right: 30px;
        top: 20px;
        :deep(.ivu-icon) {
          color: #ff7b78;
          cursor: pointer;
          margin-right: 8px;
        }

        img {
          width: 20px;
          height: 20px;
        }

        .follow {
          border-radius: calc(20 / 1920 * 100vw);
          padding: calc(5 / 1920 * 100vw) calc(15 / 1920 * 100vw);
          margin-left: calc(20 / 1920 * 100vw);
          cursor: pointer;
          img {
            vertical-align: middle;
          }

          // &:hover {
          //   cursor: pointer;
          //   background-color: #fa3c3c;
          // }
        }
        .course-follow {
          background-color: #ff3c2a;
          border-color: #ff3c2a;
          color: #fff;
        }

        .course-follownot {
          background-color: #f90;
          border-color: #f90;
          color: #fff;
        }
      }
    }

    .tab_box {
      width: 100%;
      padding: 20px;
      border-radius: 10px;
      background: #fff;
    }
  }
}

.two {
  height: 220px;
}
.live-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  p {
    margin: 40px 0;
  }
}
</style>
